<template>
  <div class="default-column">

    <el-select v-model="selectUserType" placeholder="用户类型"  @change="selectTaskType" size="small">
      <el-option v-for="item in userTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>

    <el-select v-model="selectTaskTypeValue" filterable placeholder="请选择问题类型(可搜索)"
               class="select-task-type" @change="selectTaskType" size="small">
      <el-option
        v-for="item in selectTaskTypeList"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-button type="info" size="mini" @click="cleanSelectTaskType">重置</el-button>

    <el-button type="success" size="mini" @click="dialogVisible = true" style="margin-left: 20px">手工分配</el-button>

    <el-table v-loading="willTaskListLoading" element-loading-text="拼命加载中"
              :data="willTaskList" border stripe class="item-table" size="mini">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column align="center" prop="userType" label="用户组" width="80px"></el-table-column>
      <el-table-column align="center" prop="userId" label="用户ID" width="180px">
        <template slot-scope="scope">
          <p style="color: blue; font-size: 14px" @click="showUserData(scope.row.userInfo)">{{scope.row.userId}}</p>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="userInfo.realName" label="姓名" width="80px">
        <template slot-scope="scope">
          <p style="color: blue; font-size: 14px" @click="showUserData(scope.row.userInfo)">{{scope.row.userInfo.realName}}</p>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="userInfo.cell" label="电话" width="120px">
        <template slot-scope="scope" >
          <p style="font-size: 14px">{{scope.row.userInfo.cell}}</p>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="taskName" label="问题类型">
        <template slot-scope="scope" >
          <p style="color: firebrick; font-size: 14px">{{scope.row.taskName}}</p>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="taskMessage" label="问题信息">
        <template slot-scope="scope" >
          <p style="color: firebrick; font-size: 14px">{{scope.row.taskMessage}}</p>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="dayId" label="问题时间"></el-table-column>
      <el-table-column align="center" prop="status" label="状态" width="80px">
        <template slot-scope="scope">
          <el-tag size="mini" type="warning">未分配</el-tag>
        </template>
      </el-table-column>
    </el-table>

    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 15, 20, 50]"
        :current-page.sync="page.current"
        :page-size="page.size"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>

    <el-dialog title="手工分配任务" :visible.sync="dialogVisible" width="80%">
      <template>
        <el-row>
          <el-col :span="12">
            <el-transfer v-model="ruleInfo.ids" :data="personList" :titles="personTableTitle">
            </el-transfer>
            <el-transfer v-model="ruleInfo.types" :data="taskTypeList" :titles="taskTypeTableTitle"
                         style="margin-top: 20px">
            </el-transfer>
          </el-col>

          <el-col :span="12">
            <el-transfer v-model="ruleInfo.userIds" :data="userList" :titles="userIdTableTitle">
            </el-transfer>

            <!--<el-form-item label="用户请求时间">-->
              <!--<div class="block">-->
                <!--<el-date-picker v-model="queryForm.userReqTime" type="datetimerange" :picker-options="pickerOptions" range-separator="-"-->
                                <!--start-placeholder="开始日期" end-placeholder="结束日期" align="right"> </el-date-picker>-->
              <!--</div>-->
            <!--</el-form-item>-->

            <!--<hr style="margin: 10px; color: #EBEEF5"/>-->

            <el-form ref="form" :model="ruleInfo" :rules="formRules" size="mini">
              <el-form-item label="用户类型" prop="userType">
                <el-select v-model="ruleInfo.userType" placeholder="用户类型"  @change="selectTaskType" size="small">
                  <el-option v-for="item in userTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="分配个数" prop="allotment">
                <el-input v-model="ruleInfo.allotment" style="width: 60%;" placeholder="平均分配的个数" ></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false; ruleInfo = {}">取 消</el-button>
          <el-button type="primary" @click="clickTaskRule('form')">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <user-data ref="childUserData"></user-data>

  </div>
</template>

<script>
  import UserData from "./UserData.vue";

  export default {
    components: {UserData},
    name: 'WillTask',
    data () {
      return {
        formRules: {
          allotment: [
            { required: true, message: '请输入平均分配的个数', trigger: 'blur' }
          ],
          userType: [
            { required: true, message: '请输入用户类型', trigger: 'blur' }
          ]
        },

        userTypeOptions: [
          { value: 'YYLC', label: '盈盈理财' },
          { value: 'YYX', label: '盈优选' }
        ],
        selectUserType: 'YYLC',

        // 问题类型搜索
        selectTaskTypeList: [],
        selectTaskTypeValue: '',

        willTaskListLoading: false,
        willTaskList: [],
        page: {
          current: 1,
          size: 10,
          total: 0
        },

        dialogVisible: false,
        personList: [],
        taskTypeList: [],
        userList: [],   // 待分配用户列表
        personTableTitle: ['待分配客服列表', '已选客服人员列表'],
        taskTypeTableTitle: ['待分配类型列表', '已分配类型列表'],
        userIdTableTitle: ['待分配用户列表', '已分配用户列表'],
        ruleInfo: {
          ids: [],
          types: [],
          userIds: [],
          userType: 'YYLC',
          allotment: '',
        }
      }
    },
    created() {
      this.loadTaskList();
      this.loadSelectTaskTypeList();

      this.personList = [];
      this.$$get('/customer/list').then(res => {
        if (this.checkResponse(res)) {
          res.data.data.forEach(person => {
            this.personList.push({
              key: person.id,
              label: person.name,
              disabled: false
            })
          })
        }
      });
      this.taskTypeList = [];
      this.$$get('/type/list').then(res => {
        if (this.checkResponse(res)) {
          res.data.data.forEach(taskType => {
            this.taskTypeList.push({
              key: taskType.taskCode,
              label: taskType.taskName,
              disabled: false
            })
          })
        }
      });

      this.userList = [];
      this.$$get('/user/will/alloct').then(res => {
        if (this.checkResponse(res)) {
          res.data.data.forEach(taskType => {
            this.userList.push({
              key: taskType.userId,
              label: taskType.realName + '-' + taskType.userId,
              disabled: false
            })
          });
        }
      })

    },
    methods: {
      // 点击userId查看用户信息
      showUserData(userData) {
        this.$refs.childUserData.showUserData(userData);
      },

      clickTaskRule(form) {
        this.$refs[form].validate((valid) => {
          if (!valid) {
            console.log('error submit!!');
            return false;
          }

          if (this.ruleInfo.ids.length <= 0) {
            this.$message.error("已选客服人员列表为空");
            return;
          }
          if (this.ruleInfo.types.length <= 0) {
            this.$message.error("已选客服人员列表为空");
            return;
          }
          if (this.ruleInfo.allotment <= 0) {
            this.$message.error("分配个数需大于0");
            return;
          }

          this.triggerRule();
        });
      },
      async triggerRule() {
        let data = await this.$$put('/rule/artificial/trigger', {
          allotServiceId: this.ruleInfo.ids.join(','),
          allotTaskCode: this.ruleInfo.types.join(','),
          userIdList: this.ruleInfo.userIds.join(','),
          userType: this.ruleInfo.userType,
          allotment: this.ruleInfo.allotment
        });

        if (this.checkResponse(data)) {
          this.$message.success('手工分配任务成功');
          this.dialogVisible = false;
          this.ruleInfo = {}
        }
      },

      // 页数修改
      handleSizeChange(val) {
        this.page.current = 1;
        this.page.size = val;
        this.loadTaskList();
      },
      handleCurrentChange() {
        this.loadTaskList();
      },

      // 问题类型选择
      selectTaskType() {
        this.page.current = 1;
        this.loadTaskList();
      },
      cleanSelectTaskType() {
        this.selectUserType = 'YYLC';
        this.selectTaskTypeValue = '';
        this.page.current = 1;
        this.loadTaskList();
      },

      async loadTaskList() {
        this.willTaskListLoading = true;
        let data = await this.$$post('/task/page/list/taskcode/1', {
          userType: this.selectUserType, taskCode: this.selectTaskTypeValue,
          current: this.page.current, size: this.page.size
        });
        this.willTaskListLoading = false;
        if (this.checkResponse(data)) {
          data = data.data.data;
          this.page.total = data.total;
          this.willTaskList = data.data;
        }
      },
      loadSelectTaskTypeList() {
        this.selectTaskTypeList = [];
        this.$$get('/type/list').then(res => {
          if (this.checkResponse(res)) {
            let data = res.data.data;
            let i = 1
            data.forEach(item => {
              this.selectTaskTypeList.push({value: item.taskCode, label: (i++) + '. ' + item.taskName})
            })
          }
        }).catch(e => { this.$message.error("加载任务类型列表异常: " + e) })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .select-task-type {
    margin-top: 5px;
    margin-bottom: 5px;
  }
</style>
